<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            background-color: #f00;
            /* overflow: hidden; */
            /* padding: 1px; */
            /* border: 1px solid transparent; */
            padding: 30px;
        }

        .a1 {
            width: 200px;
            height: 200px;
            background-color: #000;
            /* margin: 30px; */
        }
    </style>
</head>

<body>

    <!-- 


        隐藏元素的方法
            display:none / block    不占位置，不支持动画
            visibility:hidden / visible   占位置，不支持动画
            opacity:0 / 1      占位置，支持动画
                filter:alpha(opacity=0-100)  IE8的兼容写法

        
        重绘和回流  ****************


        锚点：相当于页面的快速定位器
            实现：href="#id"     href=""刷新页面    href="#"返回顶部    href="javascript:;"阻止页面跳转
            本质：把相关的内容跳转到最上面
        

        高度自适应
            height不写，或者写auto
            一般情况下高度会被内容撑开，除非使用了浮动或者定位


        margin传递的问题
            浮动就不会传递
            父元素有overflow:hidden 也不会传递
            父元素有padding 也不会传递
            父元素有border 也不会传递
     -->


    <div class="a">
        <div class="a1"></div>
    </div>
    33333333333333

</body>

</html>